<!-- 全国地图和省级地图联动 -->
<template>
  <div :style="{ width: width, height: height }">
    <div :id="id" :ref="id" :style="{ width: width, height: height }"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import chinaJson from "@/utils/chinaMap/china.json";

export default {
  props: {
    id: {
      required: true,
      type: String,
      default: "china",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
  },
  data() {
    return {
      chart: null,
      dataList: [
        { name: "南海诸岛" },
        { ename: "beijing", name: "北京" },
        { ename: "tianjin", name: "天津" },
        { ename: "shanghai", name: "上海" },
        { ename: "chongqing", name: "重庆" },
        { ename: "hebei", name: "河北" },
        { ename: "henan", name: "河南" },
        { ename: "yunnan", name: "云南" },
        { ename: "liaoning", name: "辽宁" },
        { ename: "heilongjiang", name: "黑龙江" },
        { ename: "hunan", name: "湖南" },
        { ename: "anhui", name: "安徽" },
        { ename: "shandong", name: "山东" },
        { ename: "xinjiang", name: "新疆" },
        { ename: "jiangsu", name: "江苏" },
        { ename: "zhejiang", name: "浙江" },
        { ename: "jiangxi", name: "江西" },
        { ename: "hubei", name: "湖北" },
        { ename: "guangxi", name: "广西" },
        { ename: "gansu", name: "甘肃" },
        { ename: "shanxi", name: "山西" },
        { ename: "neimenggu", name: "内蒙古" },
        { ename: "shanxi1", name: "陕西" },
        { ename: "jilin", name: "吉林" },
        { ename: "fujian", name: "福建" },
        { ename: "guizhou", name: "贵州" },
        { ename: "guangdong", name: "广东" },
        { ename: "qinghai", name: "青海" },
        { ename: "xizang", name: "西藏" },
        { ename: "sichuan", name: "四川" },
        { ename: "ningxia", name: "宁夏" },
        { ename: "hainan", name: "海南" },
        { name: "台湾" },
        { ename: "xianggang", name: "香港" },
        { ename: "aomen", name: "澳门" },
      ],
    };
  },
  created() {},
  mounted() {
    this.initEchart();
    if (this.chart) {
      window.addEventListener("resize", this.chart.resize);
    }
  },
  beforeDestroy() {
    if (!this.chart) return;
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initEchart() {
      let dataList = this.dataList;
      for (let i = 0; i < dataList.length; i++) {
        dataList[i].value = Math.ceil(Math.random() * 1000 - 1);
      }
      const _this = this;
      this.chart = echarts.init(this.$refs[this.id]);
      this.$echarts.registerMap("china", chinaJson);
      var option = {
        title: {
          text: "国内客户分布图",
          top: "8%",
          left: "8%",
          textStyle: {
            fontSize: 14,
            fontWeight: 500,
            color: "#fff",
          },
        },
        grid: [
          {
            left: "5%",
            right: "10%",
            top: "20%",
            bottom: "10%",
            containLabel: true,
          },
        ],
        tooltip: {
          //数据格式化
          formatter: function (params, callback) {
            return (
              params.seriesName + "<br />" + params.name + "：" + params.value
            );
          },
        },
        visualMap: {
          min: 0,
          max: 1000,
          left: "left",
          top: "bottom",
          text: ["高", "低"], //取值范围的文字
          inRange: {
            color: ["#e0ffff", "blue"], //取值范围的颜色
          },
          show: true, //图注
        },
        geo: {
          map: "china",
          zoom: 1,
          roam: true, //放大缩小地图、可拖拽
          label: {
            normal: {
              show: true, //省份名展示
              fontSize: "10", //省份字体大小
              color: "white", //省份字体颜色
            },
            emphasis: {
              show: true,
              textStyle: {
                color: "white", //鼠标移入省份字体颜色变化
                fontSize: "14px", //鼠标移入省份字体大小变化
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "black", //地图边框颜色
              areaColor: "skyblue", //地图背景颜色
            },
            emphasis: {
              show: true,
              areaColor: "#357375", //鼠标放到地图上显示的颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
          //点击省份后背景颜色改变
          select: {
            itemStyle: {
              color: "yellow",
              areaColor: "#357375", //点击省份后背景颜色改变
            },
          },
        },
        // 鼠标悬浮提示框
        series: [
          {
            name: "省份",
            type: "map",
            geoIndex: 0,
            data: this.dataList,
          },
        ],
      };
      this.chart.setOption(option);
      this.chart.on("click", function (params) {
        if (!params.data.ename) {
          alert("暂无" + params.name + "地图数据");
          return;
        }
        _this.$emit("mapChange", params, {
          provinceName: params.data.ename,
          province: params.name,
        });
      });
    },
  },
};
</script>
